<template>
  <div class="home">
    <div id="container"></div>
    <div id="container2"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
import { GridComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components";
import { LineChart, GaugeChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import requestUtil from "@/utils/request";
import { ref } from "vue";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent, GaugeChart, ToolboxComponent, TooltipComponent]);

const option1 = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "3%",
    containLabel: true,
  },
  // 工具栏
  toolbox: {
    feature: {
      saveAsImage: {
        type: "png",
      },
      // magicType: {
      //   type: ['line', 'bar', 'stack']
      // }
    },
  },
  title: {
    show: true,
    text: "学生1支部党员业绩",
    subtext: "",
    left: 220,
    top: 10,
  },
  xAxis: {
    type: "category",
    data: ["杨金涛", "李四", "王五", "张三", "李二", "李同志", "杨同志", "张同志"],
    boundaryGap: false,
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "业绩分数",
      data: [98, 80, 72, 59, 85, 21, 30, 87, 75],
      type: "line",
      smooth: true,
    },
  ],
};

const option2 = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "3%",
    containLabel: true,
  },
  // 工具栏
  toolbox: {
    feature: {
      saveAsImage: {
        type: "png",
      },
      // magicType: {
      //   type: ['line', 'bar', 'stack']
      // }
    },
  },
  title: {
    show: true,
    text: "学生2支部党员业绩",
    subtext: "",
    left: 220,
    top: 10,
  },
  xAxis: {
    type: "category",
    data: ["杨同志", "李同志", "王五", "张三", "李二", "李同志", "杨同志", "张同志"],
    boundaryGap: false,
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "业绩分数",
      data: [84, 40, 92, 59, 64, 81, 90, 62, 75],
      type: "line",
      smooth: true,
    },
  ],
};

export default {
  mounted() {
    this.$nextTick(() => {
      // 折线图
      let myChart = echarts.init(document.getElementById("container"));
      myChart.setOption(option1);
      // 2
      let myChart2 = echarts.init(document.getElementById("container2"));
      myChart2.setOption(option2);
    });
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 90%;
  height: 100%;
  padding-top: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

#container {
  width: 640px;
  height: 400px;
}
#container2 {
  width: 640px;
  height: 400px;
}
</style>
